<template>
  <div class="v-custom-attribute-config">
    <div
      class="_table-body g-relative g-flex"
      style="flex-direction: column"
    >
      <div
        class="_custom-attribute-enabledComp"
        style="height: 32px"
      >
        <el-checkbox
          v-model="customAttributeConfig.enabledComp"
          :disabled="disabled"
        >
          {{ $t("隔间配置") }}
        </el-checkbox>
      </div>
      <div
        v-if="customAttributeConfig.enabledComp"
        class="custom-attribute-display g-flex-1"
        style="overflow: auto"
      >
        <div
          v-for="(value, key) in customAttributeConfig.customAttributes"
          :key="key"
        >
          <custom-attribute-list
            :attributes="value"
            :disabled="disabled"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ShapeCustomizationManagementModel } from "@/modules/model/modals/shapeCustomization/ShapeCustomizationManagementModel";
import { computed, reactive } from "vue";
import { CustomAttributeConfig } from "@/modules/model/modals/shapeCustomization/comps/ShapeCompCustomAttrConfiguration/ShapeCompCustomAttrConfigModel";
import CustomAttributeList from "@/modules/model/modals/shapeCustomization/comps/ShapeCompCustomAttrConfiguration/ShapeCompCustomAttrList.vue";

const props = defineProps<{
  shapeCustomizationManagementModel: ShapeCustomizationManagementModel;
}>();

const customAttributeConfig: CustomAttributeConfig = reactive(
  props.shapeCustomizationManagementModel?.shapeCompCustomAttrConfigModel.customAttributeConfig
);

const disabled = computed(() => {
  return props.shapeCustomizationManagementModel.configurationDisabled || props.shapeCustomizationManagementModel.isModelDisabled;
});
</script>

<style scoped lang="scss">
.v-custom-attribute-config {
  height: 100%;
  overflow: hidden;
  display: flex;
  ._table-body {
    flex: 1;
    overflow: auto;
    ._custom-attribute-enabledComp {
      padding: 4px 16px;
    }
  }
}
</style>
